Textillate.js結合很多很棒的函式庫，簡單應用CSS3動畫特效

GitHub Star: 3,100
Javascripting Overall: 63%
瀏覽器: Chrome、Firefox和IE8+
RWD: 不支援(可運作)
License: MIT

《安裝》

• CDN

    <!-- jQuery v1.9.1 -->
    <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
    <!-- Animate.css v3.5.2 -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet" />
    <!-- lettering.js v0.7.0 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lettering.js/0.7.0/jquery.lettering.min.js"></script>
    <!-- Textillate.js v0.4.0 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/textillate/0.4.0/jquery.textillate.min.js"></script>
  

《範例》

• 淡入顯示

    <!--
    	屬性設定[註1]
    	data-in-effect: 進場效果
    -->
    <h1 class="example" data-in-effect="fadeIn">Hello World</h1>
    <script>
    	$( ".example" ).textillate();
    </script>
  

• 多行文字分批顯示

  

    <h1 class="example">
    	<ul class="texts">
    		<!--
    			屬性設定[註1]
    			data-in-effect: 進場效果
    			data-out-effect: 出場效果
    			data-in-shuffle: 進場使用隨機模式
    			data-out-shuffle: 出場使用隨機模式
    		-->
    		<li data-out-effect="fadeOut" data-out-shuffle="true">Hello</li>
    		<li data-in-effect="fadeIn">World</li>
    	</ul>
    </h1>
    <script>
    	$( ".example" ).textillate();
    </script>
  

  [註1]

  屬性	描述

  data-in-effect|進場效果(列表[註2])
  data-out-effect|出場效果(列表[註3])
  data-in-shuffle|進場使用隨機模式(列表[註4])
  data-out-shuffle|出場使用隨機(列表[註4])

  [註2]

  flash	bounce	shake	tada

  swing|wobble|pulse|flip
  flipInX|flipInY|fadeIn|fadeInUp
  fadeInDown|fadeInLeft|fadeInRight|fadeInUpBig
  fadeInDownBig|fadeInLeftBig|fadeInRightBig|bounceIn
  bounceInDown|bounceInUp|bounceInLeft|bounceInRight
  rotateIn|rotateInDownLeft|rotateInDownRight|rotateInUpLeft
  rotateInUpRight|rollIn

  [註3]

  lash	bounce	shake	tada

  swing|wobble|pulse|flip
  flipOutX|flipOutY|fadeOut|fadeOutUp
  fadeOutDown|fadeOutLeft|fadeOutRight|fadeOutUpBig
  fadeOutDownBig|fadeOutLeftBig|fadeOutRightBig|bounceOut
  bounceOutDown|bounceOutUp|bounceOutLeft|bounceOutRight
  rotateOut|rotateOutDownLeft|rotateOutDownRight|rotateOutUpLeft
  rotateOutUpRight|hinge|rollOut

  [註4]

  • sequence
  • reverse
  • sync
  • shuffle

《延伸》

1. Textillate.js
2. jschr/textillate: A jquery plugin for CSS3 text animations.